<template>
	<div class="header-box">
		<div class="left-box">
			<div class="action-btn" @click="handleSave">
				<i class="iconfont icon-baocun" />
			</div>
			<div class="action-btn" @click="handleExport">
				<i class="iconfont icon-daochu" />
			</div>
			<div class="action-btn">
				<i class="iconfont icon-shezhi" />
			</div>
			<div class="action-btn">
				<i class="iconfont icon-shijian" />
			</div>
			<div class="action-btn" @click="fullChange">
				<i :class="isFull ? 'icon-suoxiao1' : 'icon-fangda1'" class="iconfont" />
			</div>
			<div class="action-btn">
				<i class="iconfont icon-fasong" />
			</div>
			<el-divider direction="vertical" />
			<div class="action-btn" title="左侧面板" @click="globalStore.toggleLeftCollapse">
				<el-icon class="tool-title-right">
					<component :is="globalStore.isLeftCollapse ? 'DArrowLeft' : 'DArrowRight'" />
				</el-icon>
			</div>
			<div
				:class="globalStore.isRightCollapse ? 'active' : ''"
				class="action-btn"
				title="右侧面板"
				@click="globalStore.toggleRightCollapse"
			>
				<i class="iconfont icon-wuxuliebiao" />
			</div>
		</div>
		<div class="content-box">
			<div class="title">
				<i class="iconfont icon-xiangmu" />
				<span class="text">端渲染平台</span>
			</div>
		</div>
		<div class="right-box">
			<div class="action-btn">
				<i class="iconfont icon-tuichu" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useGlobalStore } from '@/store/global.ts'
import { ElMessage, ElMessageBox } from 'element-plus'

const globalStore = useGlobalStore()

interface HeaderEmits {
	(e: 'toggleFullScreen'): void
}

interface HeaderProps {
	isFull: boolean
}

withDefaults(defineProps<HeaderProps>(), {
	isFull: false
})

const emit = defineEmits<HeaderEmits>()

function fullChange() {
	emit('toggleFullScreen')
}

function handleSave() {
	ElMessageBox.confirm('是否保存该页面', 'Warning', {
		confirmButtonText: '是',
		cancelButtonText: '否',
		type: 'warning'
	})
		.then(() => {
			console.log('报错')
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '取消保存'
			})
		})
}

function handleExport() {
	console.log('导出')
}
</script>

<style lang="scss" scoped>
.header-box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;

	.left-box,
	.content-box,
	.right-box {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.left-box {
		justify-content: flex-start;
	}

	.content-box {
		justify-content: center;

		.title {
			font-size: 16px;

			.text {
				margin-left: 5px;
			}
		}
	}

	.right-box {
		justify-content: flex-end;
	}

	.action-btn {
		width: 32px;
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: center;

		&:hover {
			background-color: rgb(67, 74, 80);
			color: #38f;
		}

		i {
			font-size: 20px;
		}
	}

	.active {
		color: #38f;
	}

	.disabled {
		cursor: not-allowed;
		color: rgba(255, 255, 255, 0.5);

		&:hover {
			background-color: transparent;
			color: rgba(255, 255, 255, 0.5);
		}
	}

	.view-box {
		margin-right: 5px;

		:deep(.el-select__wrapper) {
			background: transparent;
			padding: 0 12px;
			min-height: 28px;
			box-shadow: none;

			.el-select__selected-item {
				color: #fff;
			}

			.el-select__placeholder {
				color: #fff;
			}
		}

		:deep(.el-input-number) {
			width: 50px;

			.el-input__wrapper {
				background: transparent;
				box-shadow: none;
				padding-right: 5px;
			}

			.el-input__inner {
				color: #fff;
				text-align: right;
				font-size: 16px;
			}
		}

		.unit {
			color: #fff;
			display: inline-block;
		}
	}
}
</style>
